import { createApp, h } from 'vue'
import { ElMenu, ElMenuItem, ElColorPicker, ElMessageBox } from 'element-plus'
import App from '../../App.vue'
const app = createApp(App)


let elClass = 'colorSwitchData';
// 获取前台指令
app.directive('colorSwitch', {
    mounted(el, binding) {
        console.log(binding);
    }
})

let menu: HTMLElement | null = null
let flag = true
const handleRightClick = (e: MouseEvent, el: HTMLElement) => {
    e.preventDefault()
    console.log(elClass);

    if (menu && flag == false) {
        // 如果菜单存在，则更新其位置
        menu.style.top = `${e.clientY}px`
        menu.style.left = `${e.clientX}px`
    } else {
        flag = false
        menu = document.createElement('div')
        menu.style.position = 'fixed'
        menu.style.top = `${e.clientY}px`
        menu.style.left = `${e.clientX}px`
        menu.style.backgroundColor = '#fff'
        menu.style.border = '1px solid #ccc'
        menu.style.padding = '5px'
        menu.style.boxShadow = '2px 2px 10px #0003, 1px 1px 3px #0003'
        menu.style.zIndex = '9999'
        // menu.style.padding = '15px 0'

        const customColorItem = document.createElement('div')
        customColorItem.textContent = '自定义颜色'
        customColorItem.style.padding = '3px'
        customColorItem.style.fontSize = '14px'
        customColorItem.style.cursor = 'pointer'
        const className = el.className

        customColorItem.addEventListener('click', () => {
            openColorPicker(el, className)
            document.body.removeChild(menu as Node)
        })

        menu.appendChild(customColorItem)
        document.body.appendChild(menu)

        document.body.addEventListener('click', (e) => {
            if (menu && !menu.contains(e.target as Node)) {
                document.body.removeChild(menu)
                menu = null // 重置菜单变量
            }
        })
    }

}

const changeBackgroundColor = (el: HTMLElement, color: string) => {
    el.style.backgroundColor = color
}
let colors = '';
const openColorPicker = (el: HTMLElement, className: string) => {
    // 判断是否有用户自定义颜色值
    const savedColors = JSON.parse(localStorage.getItem('elementColors') || '{}')
    const savedColor = savedColors[className] || '#FFFFFF' // 从localStorage中读取设置的颜色，默认为白色
    ElMessageBox({
        title: '选择自定义颜色',
        message: h(ElColorPicker, {
            modelValue: savedColor, onChange: (color: string | null) => {
                if (color !== null) {
                    savedColors[className] = color
                    localStorage.setItem('elementColors', JSON.stringify(savedColors)) // 将颜色设置存储到localStorage
                    changeBackgroundColor(el, color)
                }
            }
        }),
    })
    flag = true
}

const handleBodyClick = (e: MouseEvent) => {
    if (menu && !menu.contains(e.target as Node)) {
        document.body.removeChild(menu)
        menu = null // 重置菜单变量
    }
}

const RightClickDirectiveWithMenu = {
    mounted(el: HTMLElement, binding: any) {
        console.log(binding);

        el.addEventListener('contextmenu', (e) => {
            handleRightClick(e, el)
        })

        document.body.addEventListener('click', handleBodyClick)
    },
    unmounted(el: HTMLElement) {
        el.removeEventListener('contextmenu', (e) => {
            handleRightClick(e, el)
        })
        document.body.removeEventListener('click', handleBodyClick)
    },
}

export default RightClickDirectiveWithMenu
